<template>
  <div class="layout">
    <Layout>
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed">
        <div  class="layout-logo">
          <img src="../assets/images/logo2.png" alt="">
        </div>

        <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              Item 1
            </template>
            <MenuItem name="1-1">Option 1</MenuItem>
            <MenuItem name="1-2">Option 2</MenuItem>
            <MenuItem name="1-3">Option 3</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-keypad"></Icon>
              Item 2
            </template>
            <MenuItem name="2-1">Option 1</MenuItem>
            <MenuItem name="2-2">Option 2</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-analytics"></Icon>
              Item 3
            </template>
            <MenuItem name="3-1">Option 1</MenuItem>
            <MenuItem name="3-2">Option 2</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>

          <div class="right_nav">
            <div  style="display: inline-block;margin-right: 10px">
              <div v-if="fullscreen">
                <Tooltip content="退出全屏">
                  <Button type="dashed" @click="handleFullScreen" style="    background: transparent;">
                    <Icon type="md-contract"/>
                  </Button>
                </Tooltip>
              </div>
              <div v-else>
                <Tooltip content="全屏">
                  <Button type="dashed" @click="handleFullScreen" style="    background: transparent;">
                    <Icon type="md-expand"/>
                  </Button>
                </Tooltip>
              </div>
            </div>

            <Dropdown class="right_muen" >
              <a href="javascript:void(0)" style="font-size: 20px;color: #666666">
                <Icon type="ios-contact" style="font-size: 30px"/>
                {{user_Data.username}}
              </a>
              <DropdownMenu slot="list">
                <DropdownItem><span @click="user_model = true">个人信息</span></DropdownItem>
                <DropdownItem divided to="/login">退出登录</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>

        </Header>
        <Content :style="{margin: '10px', background: '#fff', minHeight: '260px'}">

          <keep-alive>
            <router-view v-if="$route.meta.keepAlive">
              <!-- 这里是会被缓存的视图组件，比如 Home！ -->
            </router-view>
          </keep-alive>

          <router-view v-if="!$route.meta.keepAlive"></router-view>

        </Content>
      </Layout>
    </Layout>


    <!--个人信息-->
    <Drawer :closable="false" width="640" v-model="user_model">
      <p :style="pStyle">身份信息</p>
      <div class="demo-drawer-profile">
        <Row>
          <Col span="12">
          <span class="text_tile">用户名称:</span> {{user_Data.username}}
          </Col>
          <Col span="12">
          <span class="text_tile">登录名:</span> {{user_Data.loginname}}
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <span class="text_tile">密码:</span>
          <Button size="small" @click="show_form = !show_form">修改密码</Button>
          </Col>
          <Col span="12">
          <span class="text_tile">所属角色:</span> {{user_Data.role}}
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <span class="text_tile">所属项目:</span> {{user_Data.department}}
          </Col>
          <Col span="12">
          <span class="text_tile">注册时间:</span> {{user_Data.date}}
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <span class="text_tile">手机号码:</span> {{user_Data.mobile}}
          </Col>
          <Col span="12">
          <span class="text_tile">邮箱:</span> {{user_Data.email}}
          </Col>
        </Row>
        <span class="text_tile">设备码:</span> {{user_Data.eq_code}}
      </div>
      <Divider/>
      <div v-show="show_form">
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
          <FormItem label="新密码" prop="passwd">
            <Input type="password" v-model="formCustom.passwd"></Input>
          </FormItem>
          <FormItem label="确认密码" prop="passwdCheck">
            <Input type="password" v-model="formCustom.passwdCheck"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formCustom')">确认修改</Button>
          </FormItem>
        </Form>
      </div>
    </Drawer>

  </div>

</template>

<script>
  export default {
    name: 'Main',
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入你的新密码'));
        } else {
          if (this.formCustom.passwdCheck !== '') {
            // 对第二个密码框单独验证
            this.$refs.formCustom.validateField('passwdCheck');
          }
          callback();
        }
      };
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入你的确认密码'));
        } else if (value !== this.formCustom.passwd) {
          callback(new Error('两次输入不一致!'));
        } else {
          callback();
        }
      };
      return {
        isCollapsed: false,
        user_Data: {username: ''},
        topMuenData: [],
        leftMenu_data: [],
        user_model: false,
        show_form: false,
        pStyle: {
          fontSize: '16px',
          color: 'rgba(0,0,0,0.85)',
          lineHeight: '24px',
          display: 'block',
          marginBottom: '16px'
        },
        fullscreen: false,//控制全屏
        formCustom: {
          passwd: '',
          passwdCheck: ''
        },
        ruleCustom: {
          passwd: [
            {validator: validatePass, trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度最小为6', trigger: 'blur'}
          ],
          passwdCheck: [
            {validator: validatePassCheck, trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度最小为6', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider () {
        this.$refs.side1.toggleCollapse();
      },


      handleSubmit(name) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/3 11:59
        *=======================================================
        *@function  修改密码
        *=====================================================*/
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$http({
              method: 'post',
              url: this.CD_.qj_url + 'index/user/setPassword',
              data: {
                id: this.user_Data.id,
                passwd: this.formCustom.passwd,
              }
            }).then(function (res) {
              var json = res.data;
              if (json.status) {
                this.$Message.success('密码信息成功，请重新登录！');
                this.$router.push('/login');
              } else {
                this.$Message.error('密码修改失败，请重试！');
              }


            }.bind(this)).catch(function (err) {
              this.$Notice.error({title: '操作失败', desc: '错误：' + err});
            }.bind(this))
          } else {
            this.$Message.error('密码信息有误，请检查！');
          }
        })
      },
      handleFullScreen() {
        //全屏
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      getBtnList(id) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/16 21:36
        *=======================================================
        *@function  获取页面按钮
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getBtnList',
          data: {
            menu_id: id,
            user_id: this.user_Data.id
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            if (json.btn_list.indexOf('add') !== -1) {
              this.CD_.btn_List.add_btn = true
            } else {
              this.CD_.btn_List.add_btn = false
            }
            if (json.btn_list.indexOf('remove') !== -1) {
              this.CD_.btn_List.remove_btn = true
            } else {
              this.CD_.btn_List.remove_btn = false
            }
            if (json.btn_list.indexOf('edit') !== -1) {
              this.CD_.btn_List.edit_btn = true
            } else {
              this.CD_.btn_List.edit_btn = false
            }
            if (json.btn_list.indexOf('view') !== -1) {
              this.CD_.btn_List.view_btn = true
            } else {
              this.CD_.btn_List.view_btn = false
            }
            if (json.btn_list.indexOf('audit') !== -1) {
              this.CD_.btn_List.audit_btn = true
            } else {
              this.CD_.btn_List.audit_btn = false
            }
            if (json.btn_list.indexOf('password') !== -1) {
              this.CD_.btn_List.password_btn = true
            } else {
              this.CD_.btn_List.password_btn = false
            }
            if (json.btn_list.indexOf('per') !== -1) {
              this.CD_.btn_List.per_btn = true
            } else {
              this.CD_.btn_List.per_btn = false
            }
            if (json.btn_list.indexOf('unaudit') !== -1) {
              this.CD_.btn_List.unaudit_btn = true
            } else {
              this.CD_.btn_List.unaudit_btn = false
            }

          } else {
            this.CD_.btn_List.add_btn = false
            this.CD_.btn_List.remove_btn = false
            this.CD_.btn_List.edit_btn = false
            this.CD_.btn_List.view_btn = false
            this.CD_.btn_List.audit_btn = false
            this.CD_.btn_List.unaudit_btn = false
            this.CD_.btn_List.password_btn = false
            this.CD_.btn_List.per_btn = false
          }

          window.localStorage.setItem('menu_id', JSON.stringify(id));
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))


      },
      topMenu() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 13:56
        *=======================================================
        *@function  初始化顶部菜单
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getMenu',
          data: {
            user_id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.topMuenData = json.menu_data;
//            this.openLeftMenu(this.topMuenData[0].id) ;
          } else {
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      },
      openLeftMenu(id) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 14:19
        *=======================================================
        *@function  打开侧边菜单
        *=====================================================*/
        if (id < 1000) {
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/Menu/getLeftMenu',
            data: {
              id: id,
              user_id: this.user_Data.id,
            }
          }).then(function (res) {
            var json = res.data;
            if (json.status) {
              this.leftMenu_data = json.leftMenu_data;

              window.localStorage.setItem('top_menu_id', JSON.stringify(id));
            } else {
              this.$Loading.error();
            }


          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '操作失败', desc: '错误：' + err});
          }.bind(this))
        }

      },
      getFilestate() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/2 15:40
        *=======================================================
        *@function  判断消息推送
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFilestate',
          data: {
            id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            console.log(json.data);

            var _this = this;
            var desc_html = '';
            for (var i = 0; i < json.data.length; i++) {
              desc_html += '您的上传文件<strong>【' + json.data[i].file_name + '】</strong>已经被 ' + json.data[i].audit_name + ' ' + (json.data[i].state === 'Enable' ? '<strong style="color: #19be6b">审核</strong>' : '<strong style="color: #ed4014">反审核</strong>') + '该文件状态已改变，请留意。<br>';
            }

            setTimeout(function () {
              _this.$Notice.success({
                title: '文件审核提示',
                desc: desc_html,
                duration: 0
              });
            }, 3000)


          }
        }.bind(this)).catch(function (err) {
        }.bind(this))

      }
    },
    mounted() {

      this.CD_.user_Data = JSON.parse(window.localStorage.getItem('user_Data'));
      this.user_Data = this.CD_.user_Data;


      var menu_id = JSON.parse(window.localStorage.getItem('menu_id'));
      if (menu_id != null) {
        this.getBtnList(menu_id);
      }

      //刷新获取原来选项
      var top_menu_id = JSON.parse(window.localStorage.getItem('top_menu_id'));

      if (top_menu_id != null) {
        this.openLeftMenu(top_menu_id);
      }

      this.topMenu();

      //判断一下是否要推送消息
      this.getFilestate();

    }
  }
</script>

<style scoped>



  .layout{
    background: #f5f7f9;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .ivu-layout {
    height: 100%;
  }

  .layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #001529;
    border-radius: 3px;
    margin: 15px auto;
  }
  .ivu-layout-sider {
    transition: all .2s ease-in-out;
    position: relative;
    background: #001529;
    min-width: 0;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
    background: #000C17;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
    background: #001529 !important;
  }
  .ivu-menu-dark {
    background: #001529;
  }

  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .layout-logo {

    position: relative;
    background-color: #002140;
    padding: 10px;
  }
  .layout-logo img{
    width: 100%;
  }
  .right_muen{
    float: right;
    margin-right: 15px;
  }
  .right_nav{
    float: right;
  }
</style>
